import * as Cesium from "cesium";
import "./style/popupStyle.less";

interface IEntityPicker {
  (params: {
    viewer: Cesium.Viewer;
    canvasX: number;
    canvasY: number;
    topPlaneHight?: number;
  }): string;
}

const entityPicker: IEntityPicker = (pickerParams) => {
  const viewer = pickerParams.viewer;
  const canvasX = pickerParams.canvasX;
  const canvasY = pickerParams.canvasY;
  //const topPlaneHight = pickerParams.topPlaneHight;

  let identifier = "none";
  let topPlaneCenter: Cesium.Cartesian3;

  const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

  handler.setInputAction((e) => {
    const pickedResult = viewer.scene.pick(e.position);

    if (Cesium.defined(pickedResult) && pickedResult.id.name == "building") {
      identifier = pickedResult.id.id;
      console.log(identifier);

      // 计算顶部中心（空间直角坐标系）
      const pickedEntity: Cesium.Entity = pickedResult.id;
      const bottomPlane = pickedEntity.polygon?.hierarchy?.getValue(
        Cesium.JulianDate.now()
      ).positions;

      const bottomPlaneCenter =
        Cesium.BoundingSphere.fromPoints(bottomPlane).center;
      const bottomPlaneCenter_cartographic =
        viewer.scene.globe.ellipsoid.cartesianToCartographic(bottomPlaneCenter);
      const topHeight: number =
        bottomPlaneCenter_cartographic.height +
        pickedEntity.polygon?.extrudedHeight?.getValue(Cesium.JulianDate.now());
      const topPlaneCenter_cartographic =
        bottomPlaneCenter_cartographic.clone();
      topPlaneCenter_cartographic.height = topHeight;
      topPlaneCenter = viewer.scene.globe.ellipsoid.cartographicToCartesian(
        topPlaneCenter_cartographic
      );

      drawPopup({
        text: identifier,
        origin: topPlaneCenter,
        parentNode: "#mapArea",
        viewer: viewer,
        canvasX: canvasX,
        canvasY: canvasY,
      });
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

  return identifier;
};

// drawPopupWindow

interface IDrawPopup {
  (params: {
    text: string;
    origin: Cesium.Cartesian3;
    parentNode: string;
    viewer: Cesium.Viewer;
    canvasX: number;
    canvasY: number;
  }): void;
}

const drawPopup: IDrawPopup = (drawPopupParams) => {
  const bottomPoint = drawPopupParams.origin;
  const parentNode = document.querySelector(
    drawPopupParams.parentNode
  ) as HTMLElement;
  const viewer = drawPopupParams.viewer;
  const canvasX = drawPopupParams.canvasX;
  const canvasY = drawPopupParams.canvasY;
  const text = drawPopupParams.text;

  if (!document.querySelector(".pop-window")) {
    const win = document.createElement("div");
    win.className = "pop-window";
    parentNode.appendChild(win);

    const line = document.createElement("div");
    line.className = "line";
    parentNode.appendChild(line);

    const header = document.createElement("div");
    header.className = "pop-window-header";
    win.appendChild(header);

    const close = document.createElement("div") as HTMLElement;
    close.className = "close";
    close.innerText = "x";
    header.appendChild(close);

    const context = document.createElement("div");
    context.className = "pop-window-context";
    context.innerText = text;
    win.appendChild(context);

    close.addEventListener("click", () => {
      win.style.display = "none";
      line.style.display = "none";
    });
  } else {
    const win: HTMLElement = document.querySelector(
      ".pop-window"
    ) as HTMLElement;
    const line: HTMLElement = document.querySelector(".line") as HTMLElement;
    const context: HTMLElement = document.querySelector(
      ".pop-window-context"
    ) as HTMLElement;
    win.style.display = "block";
    line.style.display = "block";
    context.innerText = text;
  }

  //postRender
   let listener = viewer.scene.postRender.addEventListener((e: Cesium.Scene) => {
    const bottomPoint_canvas = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
      e,
      bottomPoint
    );
    const topPoint_cavas = bottomPoint_canvas.clone();
    topPoint_cavas.x += canvasX;
    topPoint_cavas.y -= canvasY;

    const win: HTMLElement = document.querySelector(
      ".pop-window"
    ) as HTMLElement;

    const line: HTMLElement = document.querySelector(".line") as HTMLElement;

    win.style.top = (topPoint_cavas.y - 126 - 100).toString() + "px";
    win.style.left = (topPoint_cavas.x + 50).toString() + "px";
    line.style.top = (topPoint_cavas.y - 100).toString() + "px";
    line.style.left = topPoint_cavas.x.toString() + "px";
  });
};

export default entityPicker;
